<section id="visitor-editor" class="pl-24 pr-24 mb-20">
	<hl-page-header title="新建访客单"></hl-page-header>
	
	<div class="mt-15">
		<div class="vs-title">关联信息</div>
		<div class="dy-flex line-height-34">
			<div class="color-666 v-width" >关联对象:</div>
			<hl-radio :data="radioData" v-model="selectRadioData" @on-click="radioHandleClick"></hl-radio>
			<hl-button type="default" icon="el-icon-circle-plus-outline" @on-click="showClue" v-if="selectRadioData.indexOf('NO') == -1 && !querySelectCustomerData.length && !querySelectOrigin.length" size="small">关联</hl-button>
		</div>
		
		<!-- 线索 -->
		<div class="v-customer border mt-10" v-if="querySelectOrigin.length">
			<div class="v-customer-head dy-flex text-center line-height-40 color-999">
				<div class="dy-fx-2">客户名称</div>
				<div class="dy-fx-3">主题</div>
				<div class="dy-fx-2">联系人</div>
				<div class="dy-fx-3">联系电话</div>
				<div class="dy-fx-2">线索来源</div>
				<div class="dy-fx-1">操作</div>
			</div>
			<div class="dy-flex text-center line-height-40 border-t" v-for="(item,index) in querySelectOrigin">
				<div class="dy-fx-2 ellipsis-1 border-r">{{item.customerName}}</div>
				<div class="dy-fx-3 ellipsis-1 border-r">{{item.theme}}</div>
				<div class="dy-fx-2 ellipsis-1 border-r">{{item.lperson}}</div>
				<div class="dy-fx-3 border-r">{{item.phone}}</div>
				<div class="dy-fx-2 border-r">{{item.sourceValue}}</div>
				<div class="dy-fx-1">
					<span class="icon-Gm-delete-2" @click="querySelectOrigin.splice(index,1)"></span>
				</div>
			</div>
		</div>
		
		<!-- 客户 -->
		<div class="v-customer border mt-10" v-if="querySelectCustomerData.length">
			<div class="v-customer-head dy-flex text-center line-height-40 color-999">
				<div class="dy-fx-2">客户名称</div>
				<div class="dy-fx-3">简称</div>
				<div class="dy-fx-2">客户类型</div>
				<div class="dy-fx-3">联系人</div>
				<div class="dy-fx-2">联系电话</div>
				<div class="dy-fx-1">操作</div>
			</div>
			<div class="dy-flex text-center line-height-40 border-t" v-for="(item,index) in querySelectCustomerData">
				<div class="dy-fx-2 ellipsis-1 border-r">{{item.customerName}}</div>
				<div class="dy-fx-3 ellipsis-1 border-r">{{item.shortName}}</div>
				<div class="dy-fx-2 ellipsis-1 border-r">{{item.customerTypeVal}}</div>
				<div class="dy-fx-3 border-r">{{item.lperson}}</div>
				<div class="dy-fx-2 border-r">{{item.phone}}</div>
				<div class="dy-fx-1">
					<span class="icon-Gm-delete-2" @click="querySelectCustomerData.splice(index,1)"></span>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 基础信息 -->
	<div class="mt-15">
		<div class="dy-flex">
			<div class="vs-title v-width">基础信息</div>
			<a @click="clickSycCustomer" v-if="selectRadioData.indexOf('NO') == -1 && (querySelectCustomerData.length || querySelectOrigin.length)">同步关联信息</a>
		</div>
		<div class="dy-flex line-height-34 mt-10">
			<div class="dy-flex dy-fx-1">
				<div class="v-width">咨询日期:</div>
				<web-calendar type="primary" v-model="consult_time" tips="咨询日期" width="310"></web-calendar>
			</div>
			<div class="dy-flex dy-fx-1">
				<div class="v-width">访客单类型:</div>
				<hl-select width="310" type="primary" :data="visitorTypeList" v-model="selectVisitorType"></hl-select>
			</div>
		</div>
		
		<div class="dy-flex line-height-34 mt-10">
			<div class="dy-flex dy-fx-1">
				<div class="v-width">渠道分类:</div>
				<hl-select width="310" type="primary" :data="channelTypeData" v-model="selectChannelType" @on-change="getChannelNameData"></hl-select>
			</div>
			<div class="dy-flex dy-fx-1">
				<div class="v-width">渠道名称:</div>
				<hl-select width="310" type="primary" placeholder="请选择(非必填)" :data="channelNameData" v-model="selectChannelName"></hl-select>
			</div>
		</div>
		
		<div class="dy-flex line-height-34 mt-10">
			<div class="dy-flex dy-fx-1">
				<div class="v-width">中介带看人:</div>
				<input type="text" class="form-control v-input-width" placeholder="请输入(非必填)" v-model="intermediary_name">
			</div>
			<div class="dy-flex dy-fx-1">
				<div class="v-width">联系方式:</div>
				<input type="text" class="form-control v-input-width" placeholder="请输入(非必填)" v-model="intermediary_phone">
			</div>
		</div>
	</div>
	
	<!-- 客户信息 -->
	<div class="mt-15">
		<div class="vs-title">客户信息</div>
		<div class="dy-flex line-height-34 mt-10">
			<div class="dy-flex dy-fx-1">
				<div class="v-width">客户名称:</div>
				<input type="text" class="form-control v-input-width" v-model="customer_name">
			</div>
			<div class="dy-flex dy-fx-1">
				<div class="v-width">客户类型:</div>
				<hl-select width="310" type="primary" :data="companyType" v-model="selectCompanyType"></hl-select>
			</div>
		</div>
		
		<div class="dy-flex line-height-34 mt-10">
			<div class="dy-flex dy-fx-1">
				<div class="v-width">所属行业:</div>
				<hl-select width="310" type="primary" :data="industryData" v-model="selectIndustry"></hl-select>
			</div>
			<div class="dy-flex dy-fx-1"></div>
		</div>
		
		<div class="dy-flex line-height-34 mt-10">
			<div class="dy-flex dy-fx-1">
				<div class="v-width">联系人:</div>
				<input type="text" class="form-control v-input-width" v-model="customer_lperson">
			</div>
			<div class="dy-flex dy-fx-1">
				<div class="v-width">联系方式:</div>
				<input type="text" class="form-control v-input-width" v-model="customer_phone">
			</div>
		</div>
	</div>
	
	<!-- 意向信息 -->
	<div class="mt-15">
		<div class="vs-title">意向信息</div>
		<div class="dy-flex line-height-34">
			<div class="color-666 v-width" >意向水平:</div>
			<hl-radio :data="yxRadioData" v-model="selectYxRadioData"></hl-radio>
		</div>
		
		<!-- 添加初步意向 -->
		<div class="mt-10 border-b" style="padding-bottom: 15px;">
			<hl-button type="primary" icon="el-icon-circle-plus-outline" size="small" @on-click="yxShowDisplay">初步意向</hl-button>
		</div>
		
		<!-- //初步意向列表 -->
		<div class="intention-container mt-15 relative" v-if="yxShow">
			<div class="del-yx">
				<hl-button type="default" @on-click="delYx">删除</hl-button>
			</div>
			<div class="intention-item">
				<div class="dy-flex line-height-34">
					<div class="v-width">需求时间:</div>
					<div class="dy-flex">
						<web-calendar type="primary" v-model="intent_begin_time" tips="起始时间" width="140"></web-calendar>
						<span class="pl-5 pr-5">-</span>
						<web-calendar type="primary" v-model="intent_end_time" tips="截止时间" width="140"></web-calendar>
					</div>
				</div>
				
				<div class="dy-flex line-height-34 mt-10">
					<div class="v-width">需求类型:</div>
					<div class="dy-flex">
						<hl-radio :data="intentionTypes" v-model="selectIntentionType" @on-click="handleClickType"></hl-radio>
					</div>
				</div>
				
				<div class="dy-flex line-height-34 mt-10" v-if="selectIntentionType.indexOf('ER') > -1">
					<div class="v-width">需求面积:</div>
					<div class="dy-flex">
						<hl-select width="140" type="primary" :data="intentAreaData" v-model="selectIntentArea"></hl-select>
						<span class="pl-5">㎡</span>
					</div>
				</div>
				
				<div class="dy-flex line-height-34 mt-10" v-if="selectIntentionType.indexOf('WR') > -1">
					<div class="v-width">需求个数:</div>
					<div class="dy-flex">
						<input type="text" class="form-control" style="width: 140px;" v-model="intent_acreage_count">
						<span class="pl-5">个</span>
					</div>
				</div>
				
				<div class="dy-flex line-height-34 mt-10">
					<div class="v-width">需求车位：</div>
					<div class="dy-flex">
						<input type="text" class="form-control" style="width: 140px;" v-model="intent_parking_count">
						<span class="pl-5">个</span>
					</div>
				</div>
				
				<div class="dy-flex line-height-34 mt-10">
					<div class="v-width">意向项目:</div>
					<div class="dy-flex">
						<hl-select width="310" :data="yxProjectData" v-model="selectYxProject" @on-change="changeProject" type="primary"></hl-select>
						<hl-button type="default" @on-click="clickYxButton" icon="el-icon-circle-plus-outline" size="small" class="ml-24">意向{{selectIntentionType.indexOf('WR') > -1 ? '工位' : '单元'}}</hl-button>
					</div>
				</div>
			</div>
			
			<!-- 意向单元: -->
			<div v-if="selectIntentionType.indexOf('ER') > -1 && querySubmitUnitPositions.length">
				<div class="mt-10 color-666">意向单元:</div>
				<div class="v-customer border mt-10">
					<div class="v-customer-head dy-flex text-center line-height-40 color-999">
						<div class="dy-fx-2">楼宇</div>
						<div class="dy-fx-2">楼层</div>
						<div class="dy-fx-2">单元</div>
						<div class="dy-fx-1">操作</div>
					</div>
					<div class="dy-flex text-center line-height-40 border-t" v-for="(item, index) in querySubmitUnitPositions">
						<div class="dy-fx-2 border-r">{{item.building_name}}</div>
						<div class="dy-fx-2 border-r">{{item.floor_num}}</div>
						<div class="dy-fx-2 border-r">{{item.unit_name}}</div>
						<div class="dy-fx-1">
							<span class="icon-Gm-delete-2 cursor" @click="delUnit(index)"></span>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 意向工位: -->
			<div v-if="selectIntentionType.indexOf('WR') > -1 && queryPositionHandle.length">
				<div class="mt-10 color-666">意向工位:</div>
				<div class="v-customer border mt-10">
					<div class="v-customer-head dy-flex text-center line-height-40 color-999">
						<div class="dy-fx-2">楼宇</div>
						<div class="dy-fx-2">楼层</div>
						<div class="dy-fx-2">单元</div>
						<div class="dy-fx-1">工位数</div>
						<div class="dy-fx-3">工位清单</div>
					</div>
					<div class="dy-flex text-center line-height-40 border-t" v-for="(item, index) in queryPositionHandle">
						<div class="dy-fx-2 border-r">{{item.building_name}}</div>
						<div class="dy-fx-2 border-r">{{item.floor_num}}</div>
						<div class="dy-fx-2 border-r">{{item.unit_name}}</div>
						<div class="dy-fx-1 border-r">{{item.child.length}}</div>
						<div class="dy-fx-3 dy-flex">
							<div class="ml-10" v-for="(item1, index1) in item.child">
								{{item1.name}}
								<span class="icon-Gm-delete-2 cursor" @click="delPosition(index, index1)"></span>
							</div>
						</div>						
					</div>
				</div>
			</div>
			
			<div class="hl-checkbox-container mt-15" v-if="querySubmitUnitPositions.length && selectRadioData.indexOf('NO') == -1 && (querySelectOrigin.length || querySelectCustomerData.length)">
				<ul>
					<li class="item is-inline" :class="{'is-checked': customerXsFlag}" @click="sycCustomerXS">
						<span class="hl-checkbox-inner"></span>
						<p class="hl-checkbox-label">同步至 线索/客户 初步意向</p>
					</li>
				</ul>
			</div>
		</div>
		
		<!-- 自定义字段 -->
		<div class="mt-15">
			<hl-custom-fileds type="VISITOR_FORM" :data="tmpData" v-model="resData"></hl-custom-fileds>
		</div>
		
		<div class="pt-15 border-t">
			<hl-button type="primary" @on-click="saveSubmit">保存</hl-button>
		</div>
		
	</div>
	
	<!-- 关联线索 -->
	<hl-dialog title="关联线索" :visible="isClueShow" width="800" height="550" @on-close="closeSource">
		<div class="clue-container">
			<div class="head-container clearfix">
			  <div class="clearfix">
			    <div class="mes clearfix">
						<p>信息检索</p>
						<div class="global_search">
							<span class="icon-Gm-search"></span>
							<input v-model="keyword" type="text" class="form-control keyword-input" placeholder="主题/目标客户/联系人/联系电话/创建人" />
						</div>
					</div>
					<div class="mes clearfix">
						<p>线索来源</p>
						<div>							
							<hl-select width="140" :data="clueData" v-model="selectClue" type="primary"></hl-select>
						</div>
					</div>	
					<div class="button-group">
						<hl-button size="mini" @on-click="getSourceData">查询</hl-button>
						<hl-button size="mini" @on-click="resetSource">重置</hl-button>
					</div>			    
				</div>
			</div>
			<div class="br-4 box-i-shadow-2 mt-15 text-center">
				<div class="dy-flex line-height-34 color-999">
					<div class="dy-fx-1"></div>
					<div class="dy-fx-4">客户名称</div>
					<div class="dy-fx-4">主题</div>
					<div class="dy-fx-4">联系人</div>
					<div class="dy-fx-4">联系电话</div>
					<div class="dy-fx-6">线索来源</div>
				</div>
				<div class="dy-flex line-height-34 border-t" style="height: 34px;" v-for="item in originData" @click="selectClueId(item)">
					<div class="dy-fx-1 auth-config-pop">
						<span class="auth-item" :class="{'js-q-active': selectUnitPosition(selectOrigin, item.code) > -1}" style="margin: 3px 3px 0px 25px;"></span>
					</div>
					<div class="dy-fx-4 ellipsis-1">{{item.customerName}}</div>
					<div class="dy-fx-4 ellipsis-1">{{item.theme}}</div>
					<div class="dy-fx-4 ellipsis-1">{{item.lperson}}</div>
					<div class="dy-fx-4">{{item.phone}}</div>
					<div class="dy-fx-6">{{item.sourceValue}}</div>
				</div>
			</div>
		</div>
		<div slot="footer">
			<hl-button type="primary" @on-click="querySelectOriginBtn">确定</hl-button>
			<hl-button type="outline" @on-click="closeSource">取消</hl-button>
		</div>
	</hl-dialog>
	
	<!-- 关联客户 -->
	<hl-dialog title="关联客户" :visible="isCustomer" width="800" height="550" @on-close="closeCustomer">
		<div class="clue-container">
			<div class="head-container clearfix">
			  <div class="clearfix">
			    <div class="mes clearfix">
						<p>信息检索</p>
						<div class="global_search">
							<span class="icon-Gm-search"></span>
							<input v-model="keyword" type="text" class="form-control keyword-input" placeholder="主题/目标客户/联系人/联系电话/创建人" />
						</div>
					</div>
					<div class="mes clearfix">
						<p>客户类型</p>
						<div>							
							<hl-select width="140" :data="companyType" v-model="selectCompanyPopType" type="primary"></hl-select>
						</div>
					</div>	
					<div class="button-group">
						<hl-button size="mini" @on-click="customerGet">查询</hl-button>
						<hl-button size="mini" @on-click="resetSource">重置</hl-button>
					</div>			    
				</div>
			</div>
			<div class="br-4 box-i-shadow-2 mt-15 text-center">
				<div class="dy-flex line-height-34 color-999">
					<div class="dy-fx-1"></div>
					<div class="dy-fx-4">客户名称</div>
					<div class="dy-fx-4">简称</div>
					<div class="dy-fx-4">客户类型</div>
					<div class="dy-fx-4">联系人</div>
					<div class="dy-fx-6">联系电话</div>
				</div>
				<div class="dy-flex line-height-34 border-t" style="height: 34px;" v-for="item in customerData" @click="selectCustomerId(item)">
					<div class="dy-fx-1 auth-config-pop">
						<span class="auth-item" :class="{'js-q-active': selectUnitPosition(selectCustomerData, item.id, 'id') > -1}" style="margin: 3px 3px 0px 25px;"></span>
					</div>
					<div class="dy-fx-4 ellipsis-1">{{item.customerName}}</div>
					<div class="dy-fx-4 ellipsis-1">{{item.shortName}}</div>
					<div class="dy-fx-4 ellipsis-1">{{item.customerTypeVal}}</div>
					<div class="dy-fx-4">{{item.lperson}}</div>
					<div class="dy-fx-6">{{item.phone}}</div>
				</div>
			</div>
		</div>
		<div slot="footer">
			<hl-button type="primary" @on-click="querySelectCustomerBtn">确定</hl-button>
			<hl-button type="outline" @on-click="closeCustomer">取消</hl-button>
		</div>
	</hl-dialog>
	
	<!-- 意向弹窗 -->
	<hl-dialog title="添加单元" :visible="isIntentionShow" width="800" @on-close="closeYxDialog">
		
		<div class="intention-pop-container">
			<div class="dy-flex line-height-34">
				<div class="pr-12 dy-flex">
					<span class="pr-5">选择楼宇:</span>
					<hl-select width="150" :data="buildingData" v-model="selectBuild" type="primary" @on-change="yxFloor"></hl-select>
				</div>
				<div class="pr-12 dy-flex" v-if="selectIntentionType.indexOf('ER') > -1">
					<span class="pr-5">楼层:</span>
					<hl-select width="150" :data="floorData" v-model="selectFloor" type="primary" @on-change="yxUnit"></hl-select>
				</div>
				<div class="pr-12 dy-flex" v-if="selectIntentionType.indexOf('WR') > -1">
					<span class="pr-5">楼层:</span>
					<hl-select width="150" :data="floorData" v-model="selectFloor" type="primary" @on-change="yxUnit1"></hl-select>
				</div>
				<div class="pr-12 dy-flex" v-if="selectIntentionType.indexOf('WR') > -1">
					<span class="pr-5">单元:</span>
					<hl-select width="150" :data="unitData" v-model="selectUnit" type="primary" @on-change="yxPosition"></hl-select>
				</div>
			</div>
			<div class="unit-container dy-flex mt-10" v-if="selectIntentionType.indexOf('ER') > -1">
				<div class="line-height-34 v-width">单元</div>
				<div class="unit-list dy-flex dy-fx-1" style="flex-wrap: wrap;">
					<div class="unit-item" 
						v-for="item in unitData" @click="selectUnitData(item)"
						:class="{
							cz:item.rentState === 'IR',
							yd:item.rentState === 'YD',
							lv:item.rentState === 'IP',
							dq:item.rentState === 'DU',
							zy:item.rentState === 'ZY',
							kz:item.rentState === 'VA',
							fn:item.rentState === 'FN',
						}"
					>
						{{item.name}}
						<i class="icon-Nav-contract-choice selected-icon" v-if="selectUnitPosition(submitUnitPositions, item.code) > -1"></i>
					</div>
				</div>
			</div>
			<div class="unit-container dy-flex mt-10" v-if="selectIntentionType.indexOf('WR') > -1">
				<div class="line-height-34 v-width">工位元</div>
				<div class="unit-list dy-flex dy-fx-1" style="flex-wrap: wrap;">
					<div class="unit-item" v-for="item in positionData" @click="selectPositionData(item)"
						:class="{
							cz:item.rentState === 'IR',
							yd:item.rentState === 'YD',
							lv:item.rentState === 'IP',
							dq:item.rentState === 'DU',
							zy:item.rentState === 'ZY',
							kz:item.rentState === 'VA',
							fn:item.rentState === 'FN'
						}"
					>
						{{item.name}}
						<i class="icon-Nav-contract-choice selected-icon" v-if="selectUnitPosition(submitUnitPositions, item.code) > -1"></i>
					</div>
				</div>
			</div>
		</div>
		
		<div slot="footer">
				<hl-button type="primary" @on-click="querySubmitUnitPositionsEv">确认添加</hl-button>
		</div>
	</hl-dialog>
</section>

<style>
	.hl-checkbox-container ul{
		
	}
	.alignItems{
		align-items: flex-start!important;
	}
	.unit-container .cz {
	  background: #44b549;
	}
	.unit-container .lv {
	  background: rgba(249,185,107,1);
	}
	.unit-container .dq {
	  background: #e75776;
	}
	.unit-container .zy {
	  background: #c68b8b;
	}
	.unit-container .kz {
	  background: #bfc0c1;
	}
	.unit-container .fn {
	  background: #AC101A;
	}
	.unit-container .wp {
	  background: -webkit-linear-gradient(left,#a994ff ,#648ae2);	  
	}
	.unit-container .st {
	  background: -webkit-linear-gradient(left,#ffc688 ,#ff7b99); 
	}
	
	.vs-title {
		font-size:14px;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(146,155,168,1);
	}	
	.v-width {
		width: 85px;
	}
	.v-input-width {
		width: 310px;
	}
	.v-customer-head {
		background:linear-gradient(180deg,rgba(250,250,250,1) 0%,rgba(234,234,234,1) 100%);
	}	
	
	.hl-dialog__body {
		height: 300px;
	}
	.unit-item {
		position: relative;
		min-width: 80px;
		max-width: 190px;
		height: 36px;
		margin-right: 7px;
		margin-bottom: 10px;
		padding-left: 7px;
		padding-right: 24px;
		border-radius: 4px;
		background-color: #44b549;
		color: #fff;
		line-height: 36px;
	}
	.selected-icon {
		position: absolute;
		right: 7px;
		top: 50%;
		transform: translate(0, -50%);
	}
	.del-yx {
		position: absolute;
		right: 0;
		top: 0;
	}
	
	.head-container {
	  position: relative;
	  padding: 10px 0px 14px;
	}
	
	.head-container .mes {	  
	  margin-right: 10px;
	  float: left;
	}
	
	.head-container .mes p {
	  font-size: 12px;
	  color: #CFCFCF;
	  margin-bottom: 6px;
	}
	
	.head-container .mes .keyword-input {
	  width: 290px;
	  height: 34px;
		text-indent: 10px;
	}
	
	.head-container .flow {
	  float: left;
	  margin-right: 10px;
	}
	
	.head-container .flow p {
	  font-size: 12px;
	  color: #CFCFCF;
	  margin-bottom: 6px;
	}
	
	.head-container .flow .flow-select {
	  width: 140px;
	  height: 34px;
	}
	
	.head-container .button-group {
	  padding-top: 24px;
	}
	
	.custom_container{
	  display: flex;
	  flex-wrap: wrap;
	  align-items: flex-start;
	}
	.custom_container>div{
	  display: flex;
	  margin-bottom: 10px;
	  margin-right: 20px;
	}
	.custom_title{
	  padding-left: 8px;
	  position: relative;
	}
	.custom_title>span{
	  position: absolute;
	  left: 0px;
	}
	.hl-checkbox-container .item{
		margin-bottom: 0;
	}
</style>

<script src="modules/visitor/scripts/editor.js" type="text/javascript" charset="utf-8"></script>